<template>
   <div class="container-flu">
      <section class="content">
        <section class="title">
              <div class="singelDog"></div>
        </section>
        <section class="singel">
             <form class="form" >
                 <input type="text" name="" value="">
                 <input type="text" name="" value="">
                 <button type="button" name="button" @click="login()">登录</button>
             </form>
        </section>
      </section>
   </div>
</template>
<script>
import axios from 'axios'
export default {
      data () {
        return {

        }
      },
      methods:{
        login(){
        this.$store.commit('login',true);     //提交vuex中的mutations改变token状态
         let redirect = decodeURIComponent(this.$route.query.redirect || '/home');  //获取登录成功后要跳转的路由。
        this.$router.push({
          path: redirect
        })
        }
      },
      created:function(){

      }

}
</script>
<style lang="scss">
.container-flu{
  flex: 1;
  height: 100%;
  width: inherit;

}
.content{
  display: flex;
  padding: 100px 0 0 0;
}
.title{
  text-align: center;
  padding: 10px 0;
  width: 500px;
}
.singelDog{
  width: 600px;
  height:600px;
  background-image: url('../../static/img/singel.jpg');
  background-size: 100% 100%;
}
.singel{
  flex: 1;
  text-align: center;
}
.form{
  width: 400px;
  display:flex;
  flex-direction: column;
  padding-left: 25%;
  padding-top: 100px;
}
input,button{
  flex: 1;
  padding: 10px;
  margin-bottom: 5px;
}
</style>
